<template>
    <div class="traffic">
        <!-- 轮播组件 -->
        <el-carousel indicator-position="none" height="370px" arrow="never" :interval="delay" @change="itemChange" ref="carousel">
            <el-carousel-item v-for="item in 6" :key="item">
                <div class="monitor" v-for="it in pictureList" :key="it.id">
                    <div class="head">
                        <div class="head-bg">
                            <img :src="require('@/assets/images/Camera.png')" alt="" width="21px" height="25px">
                        </div>
                    </div>
                    <!-- 视频地址 -->
                    <div class="video">
                        <!-- <img :src="it.image" alt="" width="100%" height="100%"> -->
                        <videoPlayer ref="videoPlayer" :playsinline="true" :options="playerOptions" class="video-player">
                        </videoPlayer>
                    </div>
                </div>
            </el-carousel-item>
            <!-- 分页器 -->
            <ul class="pagination">
                <li class="dot" :class="i===isActive?'actived':''" v-for="(it,i) in 6" :key="i" @click="changePage(i)">
                </li>
            </ul>
        </el-carousel>
    </div>
</template>
<script>
    import {
        videoPlayer
    } from 'vue-video-player'
    import { SetCameraInfo } from '@/util/poi'
    import { delay } from '@/util/date'
    import 'video.js/dist/video-js.css'
    export default {
        name: 'TRAFFIC',
        props: [''],
        data() {
            return {
                delay: 6000,
                isActive: 0,
                pictureList: [{
                        id: 1,
                        image: require('@/assets/images/cityInfo/SentosaExpressTrainTicket.png')
                    },
                    {
                        id: 2,
                        image: require('@/assets/images/cityInfo/T_ArtScience_Museum.png')
                    },
                    {
                        id: 3,
                        image: require('@/assets/images/cityInfo/Float-at-Marina-Bay-crop_original.png')
                    },
                    {
                        id: 4,
                        image: require('@/assets/images/cityInfo/T_Marina_Bay_Sands_Singapore.png')
                    }
                ],
                playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: true, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm', //路径
                        type: 'video/webm' //类型
                    }],
                    poster: require('@/assets/images/cityInfo/T_Marina_Bay_Sands_Singapore.png'), //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true, //全屏按钮
                        currentTimeDisplay: false, // 当前时间
                        volumeControl: false, // 声音控制键
                        playToggle: false, // 暂停和播放键
                        progressControl: false, // 进度条
                    }
                }
            };
        },

        components: {
            videoPlayer
        },

        computed: {},

        beforeMount() {},

        mounted() {
            this.setCameraFocus()
        },

        methods: {
            // 监听幻灯片的索引
            itemChange(n) {
                this.isActive = n
            },
            // 点击分页器跳转目标幻灯片
            changePage(i) {
                console.log(i);
                this.$refs.carousel.setActiveItem(i)
            },
            // 聚焦及镜头行为
            async setCameraFocus() {
                let removeJsondata = {
                    "covering_type": "poi" //覆盖物类型, 详见下表
                }
                window.cloudRender.SuperAPI("RemoveAllCovering", removeJsondata);
                this.$nextTick(() => {
                    let jsondata = SetCameraInfo("103.858047,1.35507", 1000, 30)
                    window.cloudRender.SuperAPI("SetCameraInfo", jsondata)
                })
                await delay(1500)
                // 绕中心点旋转
                window.cloudRender.SuperAPI("SetCameraRotate", {
                    "time": 400,
                    "direction": "anticlockwise"
                })
            }
        },

        watch: {}

    }
</script>
<style>
    .video-js .vjs-big-play-button {
        display: none;
    }
</style>